<!--
 * @Description: 租户管理
 * @FilePath: \hk-computerRoom-Security\src\views\system\tenant\index.vue
 * @Date: 2024-01-03 15:18:46
 * @LastEditTime: 2024-02-01 14:28:42
-->
<template>
	<div class="system-user-container layout-padding">
		<div class="layout-padding-auto layout-pd card-bg energy-table current-page">
			<div class="system-user-search energy-from">
				<el-form size="default">
					<el-row :gutter="20">
						<el-col :xs="24" :sm="12" :md="8" :lg="3" :xl="3" class="mb20">
							<el-form-item>
								<el-input v-model="state.formData.name" placeholder="请输入租户名" style="width: 100%" clearable> </el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="3" :xl="3" class="mb20">
							<el-form-item>
								<el-input v-model="state.formData.contactMobile" placeholder="请输入手机号码" style="width: 100%" clearable> </el-input>
							</el-form-item>
						</el-col>
						<!-- <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" class="mb20">
							<el-form-item>
								<el-select v-model="state.formData.status" placeholder="请选择住户状态" size="default">
									<el-option v-for="item in state.options" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</el-col> -->
						<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="12" class="mb20">
							<el-form-item>
								<div class="btn2" @click="getAllTenant">
									<el-icon> <ele-Search /> </el-icon><span class="ml6">查询</span>
								</div>
								<div class="btn3 ml10" @click="refreshData">
									<el-icon> <ele-Refresh /> </el-icon><span class="ml6">重置</span>
								</div>
								<div class="btn1 ml10" @click="onOpenAdd()">
									<el-icon> <ele-CirclePlus /> </el-icon><span class="ml6">新增租户</span>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>

			<el-table
				:data="state.tableData.data"
				v-loading="state.tableData.loading"
				style="width: 100%"
				:cell-style="{ textAlign: 'center' }"
				:row-style="{ background: '#0F2C6A' }"
				:header-cell-style="{ background: '#1E4897', color: '#499AFD', textAlign: 'center' }"
			>
				<el-table-column align="center" type="index" label="序号" width="80" />
				<el-table-column align="center" prop="name" label="租户名" width="200" />
				<el-table-column align="center" prop="status" label="租户状态" width="120">
					<template #default="scope">
						<el-switch
							v-model="scope.row.status"
							size="default"
							:active-value="0"
							:inactive-value="1"
							active-text="启用"
							inactive-text="禁用"
							inline-prompt
							style="--el-switch-on-color: #13ce66"
							@change="changeStatus(scope.row)"
						>
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="adminUserName" label="租户管理员" width="180" />
				<el-table-column align="center" prop="contactName" label="联系人" width="180" />
				<el-table-column align="center" prop="contactMobile" label="手机号" width="160" />
				<el-table-column align="center" prop="website" label="绑定域名" width="220" />
				<el-table-column align="center" prop="accountCount" label="账号数量" width="120" />
				<el-table-column align="center" prop="createTime" label="添加时间" />
				<el-table-column align="center" label="操作" fixed="right" width="200">
					<template #default="scope">
						<el-button size="small" link type="primary" @click="onOpenPackage(scope.row, true)">详情</el-button>
						<el-button size="small" link type="success" @click="onOpenPackage(scope.row, false)">绑定套餐</el-button>
						<el-button size="small" link type="success" @click="onOpenAdd(scope.row)">修改</el-button>
						<!-- <el-button size="small" link type="danger" @click="onRowDel(scope.row)" :disabled="scope.row.tenantStatus == 0">删除</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[1, 5, 10, 15]"
				v-model:current-page="state.tableData.param.pageNum"
				background
				v-model:page-size="state.tableData.param.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.total"
			>
			</el-pagination>
		</div>
		<!-- 新增/修改 -->
		<AddDialog ref="addDialogRef" @refresh="getAllTenant()" />
		<!-- 绑定套餐/查看详情 -->
		<PackageDialog ref="packageDialogRef" @refresh="getAllTenant()" />
	</div>
</template>
<script setup lang="ts" name="tenant">
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { ElMessageBox, ElNotification } from 'element-plus';
import { useTenantApi } from '/@/api/system/tenant/index';
const AddDialog = defineAsyncComponent(() => import('/@/views/system/tenant/addDialog.vue'));
const PackageDialog = defineAsyncComponent(() => import('/@/views/system/tenant/packageDialog.vue'));

// 定义变量内容
const addDialogRef = ref();
const packageDialogRef = ref();

const state: any = reactive({
	formData: {
		name: '', // 用户名称
		contactMobile: '', // 手机号码
	},
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
		},
	},
});

// 分页查询所有租户
const getAllTenant = async () => {
	state.tableData.loading = true;
	const { data } = await useTenantApi().pageTenant({
		...state.formData,
		...state.tableData.param,
	});
	state.tableData.data = data.records;
	state.tableData.total = data.total;
	setTimeout(() => {
		state.tableData.loading = false;
	}, 200);
};

// 打开新增/编辑弹窗
const onOpenAdd = (row?: any) => {
	addDialogRef.value.openDialog(row);
};

// 打开绑定套餐/详情弹窗
const onOpenPackage = (row: any, isDetail: boolean) => {
	packageDialogRef.value.openDialog(row, isDetail);
};

// 修改状态
const changeStatus = async (row: any) => {
	const data = await useTenantApi().enableTenant({
		tenantId: row.id,
		status: row.status,
	});
	if (data.code == 200) {
		ElNotification({
			title: '提示',
			message: '租户状态切换成功',
			position: 'top-right',
			type: 'success',
		});
		getAllTenant();
	}
};

// 删除
// const onRowDel = (row: any) => {
// 	ElMessageBox.confirm(`此操作将永久删除岗位：“${row.name}”，是否继续?`, '提示', {
// 		confirmButtonText: '确认',
// 		cancelButtonText: '取消',
// 		type: 'warning',
// 	})
// 		.then(async () => {
// 			// const data = await usePostApi().delPostById(row.id);
// 			// if (data.code == 200) {
// 			// 	ElNotification({
// 			// 		title: '提示',
// 			// 		message: '删除岗位信息成功',
// 			// 		position: 'top-right',
// 			// 		type: 'success',
// 			// 	});
// 			// 	getAllTenant();
// 			// }
// 		})
// 		.catch(() => {});
// };

//
const refreshData = () => {
	state.formData = {
		name: '', // 用户名称
		contactMobile: '', // 手机号码
	};
	getAllTenant();
};

// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getAllTenant();
};

// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getAllTenant();
};

// 页面加载时
onMounted(() => {
	getAllTenant();
});
</script>
<style scoped lang="scss">
.system-user-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;

		.el-table {
			flex: 1;
		}
	}
}
</style>
